# Default Props

<EpicVideo url="https://www.epicreact.dev/workshops/react-fundamentals/default-props" />

👨‍💼 Sometimes you want to allow the user of your component to skip providing a
prop and use a default value instead. To do this, we can use
[destructuring default values syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values_2),
but when users of our component try to skip a prop, TypeScript will complain
because our type says all the elements of the `CalculatorProps` type are
required.

So when you make a prop optional, make sure you provide any relevant default
value as well as mark it as optional using the
[optional properties syntax](https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties):

```tsx
type User = { name: string; isCute?: boolean }
// name is required, isCute is optional, so these both compile:
const kody = { name: 'Kody', isCute: true }
const peter = { name: 'Peter' }
```

For this step, make all props optional. Default `left` and `right` to
`0` and `operator` to `'+'`. Then you can update the App to test it out:

```tsx
function App() {
	return (
		<div>
			<h1>Calculator</h1>
			<Calculator left={1} right={2} />
			<Calculator operator="-" />
			<Calculator left={1} operator="*" />
			<Calculator operator="/" right={2} />
		</div>
	)
}
```
